<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩添加</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="/manageSystem/layui/css/layui.css">
    <link rel="stylesheet" href="/manageSystem/css/common.css">


    <link rel="stylesheet" href="/manageSystem/layui/extend/dtree.css">
    <link rel="stylesheet" href="/manageSystem/layui/extend/font/dtreefont.css">
    <link rel="stylesheet" href="/manageSystem/layui/extend/formSelects-v4.css">
    <style>
        .layui-form {
            /*margin-right: 20px;*/
            margin: 40px 40px 40px 10px;
        }

        .layui-form-label {
            width: 150px;
            padding-left: 0;
            padding-right: 0;
        }

        .layui-input-block {
            margin-left: 170px;
        }
    </style>
</head>
<body>
<!--    <h1>学生成绩添加</h1>-->
<form class="layui-form" action="">
    <!--学号-->
    <div class="layui-form-item">
        <label for="studentId" class="layui-form-label">学号</label>
        <div class="layui-input-block">
            <input type="text" id="studentId" name="studentId" required lay-verify="required" placeholder="学号"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--姓名-->
    <div class="layui-form-item">
        <label for="studentName" class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" id="studentName" name="studentName" required lay-verify="required" placeholder="姓名"
                   autocomplete="off" class="layui-input" disabled style="border-width: 0">
        </div>
    </div>
    <!--班级-->
    <div class="layui-form-item">
        <label for="className" class="layui-form-label">班级</label>
        <div class="layui-input-block">
            <input type="text" id="className" name="className" required lay-verify="required" placeholder="班级"
                   autocomplete="off" class="layui-input" disabled style="border-width: 0">
        </div>
    </div>
    <!--科目1-->
    <div class="layui-form-item">
        <label for="subjectsScore1" id="subjectsScore1-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore1" name="subjectsScore1" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--科目2-->
    <div class="layui-form-item">
        <label for="subjectsScore2" id="subjectsScore2-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore2" name="subjectsScore2" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--科目3-->
    <div class="layui-form-item">
        <label for="subjectsScore3" id="subjectsScore3-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore3" name="subjectsScore3" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--科目4-->
    <div class="layui-form-item">
        <label for="subjectsScore4" id="subjectsScore4-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore4" name="subjectsScore4" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--科目5-->
    <div class="layui-form-item">
        <label for="subjectsScore5" id="subjectsScore5-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore5" name="subjectsScore5" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--科目6-->
    <div class="layui-form-item">
        <label for="subjectsScore6" id="subjectsScore6-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore6" name="subjectsScore6" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--科目7-->
    <div class="layui-form-item">
        <label for="subjectsScore7" id="subjectsScore7-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore7" name="subjectsScore7" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--科目8-->
    <div class="layui-form-item" id="subjects8-state">
        <label for="subjectsScore8" id="subjectsScore8-label" class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" id="subjectsScore8" name="subjectsScore8" required lay-verify="required"
                   placeholder="分数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--按钮-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>
</form>

<script src="/js/jquery.js"></script>
<script src="/manageSystem/layui/layui.js"></script>

<script src="/js/myWebConfig.js"></script>
<!--输入学号，自动获取学生姓名-->
<script>
    $(function () {
        // 进行科目动态展示。
        console.log("当前回传班级科目名称：")
        console.log(JSON.parse(window.sessionStorage.getItem("subjectNames")))

        // 科目动态展示。
        let subject = JSON.parse(window.sessionStorage.getItem("subjectNames"))
        // console.log("第十个元素：")
        // console.log(subject[10])
        if (subject[10] == undefined){
            $("#subjectsScore1-label").text(subject[3])
            $("#subjectsScore2-label").text(subject[4])
            $("#subjectsScore3-label").text(subject[5])
            $("#subjectsScore4-label").text(subject[6])
            $("#subjectsScore5-label").text(subject[7])
            $("#subjectsScore6-label").text(subject[8])
            $("#subjectsScore7-label").text(subject[9])
            $("#subjectsScore8-label").val("")
            $("#subjectsScore8").val(0)

            $("#subjects8-state").hide()
        }else {
            $("#subjectsScore1-label").text(subject[3])
            $("#subjectsScore2-label").text(subject[4])
            $("#subjectsScore3-label").text(subject[5])
            $("#subjectsScore4-label").text(subject[6])
            $("#subjectsScore5-label").text(subject[7])
            $("#subjectsScore6-label").text(subject[8])
            $("#subjectsScore7-label").text(subject[9])
            $("#subjectsScore8-label").text(subject[10])

            $("#subjects8-state").show()
        }

        // 学号离焦时查询当前学号所对应的学生姓名。
        $("#studentId").blur(function () {
            console.log("当前学号为：")
            console.log($("#studentId").val())
            if ("" != $("#studentId").val()){
                $.get(webUrl+studentsDataPrefix+"/getStudentName/"+$("#studentId").val(),function (response) {
                    console.log("回传的数据")
                    console.log(response)
                    // console.log(response == "null")

                    // 不为 null
                    if (response!="null"){
                        $("#studentName").val(response)
                        console.log("当前回传班级：" + window.sessionStorage.getItem("className") )
                        $("#className").val(window.sessionStorage.getItem("className"))

                    }else {
                        parent.layer.msg("该学号不存在！<br>请输入10位数字长度的学号！", {time: 3000, icon: 5});
                    }

                })
            }else {
                parent.layer.msg("请输入学生学号", {time: 3000, icon: 5});
            }
        });
    });
</script>
<script>

    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            console.log("添加学生页面： ================================")
            let studentIdReg = /^[0-9]{10}$/,
                studentNameReg = /^[\u4e00-\u9fa5A-Za-z]{2,5}$/,
                subjectsScoreReg = /^(\d{1,3}|(\d{1,3}\.\d{0,2}))$/;
            // 分别对应：学号，姓名，分数。
            if (!studentIdReg.test(data.field.studentId)) {
                parent.layer.msg("学号格式不正确。长度为10位数字", {time: 3000, icon: 5});
                return false;
            }
            if (!studentNameReg.test(data.field.studentName)) {
                parent.layer.msg("姓名为 2-5位汉字", {time: 3000, icon: 5});
                return false;
            }

            // 分数。
            if (!subjectsScoreReg.test(data.field.subjectsScore1)) {
                parent.layer.msg("《java设计模式》的分数格式不正确，\n格式如：100.00。| 100", {time: 3000, icon: 5});
                return false;
            }
            if (!subjectsScoreReg.test(data.field.subjectsScore2)) {
                parent.layer.msg("《小灰漫画算法》的分数格式不正确，\n格式如：100.00。| 100", {time: 3000, icon: 5});
                return false;
            }
            if (!subjectsScoreReg.test(data.field.subjectsScore3)) {
                parent.layer.msg("《深入了解虚拟机》的分数格式不正确，\n格式如：100.00。| 100", {time: 3000, icon: 5});
                return false;
            }
            if (!subjectsScoreReg.test(data.field.subjectsScore4)) {
                parent.layer.msg("《java核心技术卷1》的分数格式不正确，\n格式如：100.00。| 100", {time: 3000, icon: 5});
                return false;
            }
            if (!subjectsScoreReg.test(data.field.subjectsScore5)) {
                parent.layer.msg("《java设计模式》的分数格式不正确，\n格式如：100.00。| 100", {time: 3000, icon: 5});
                return false;
            }
            if (!subjectsScoreReg.test(data.field.subjectsScore6)) {
                parent.layer.msg("《java编程思想》的分数格式不正确，\n格式如：100.00。| 100", {time: 3000, icon: 5});
                return false;
            }
            if (!subjectsScoreReg.test(data.field.subjectsScore7)) {
                parent.layer.msg("《java设计模式》的分数格式不正确，\n格式如：100.00。| 100", {time: 3000, icon: 5});
                return false;
            }

            console.log("添加学生的信息：")
            console.log(data.field)
            let subjectList = []
            subjectList[0] = data.field.subjectsScore1
            subjectList[1] = data.field.subjectsScore2
            subjectList[2] = data.field.subjectsScore3
            subjectList[3] = data.field.subjectsScore4
            subjectList[4] = data.field.subjectsScore5
            subjectList[5] = data.field.subjectsScore6
            subjectList[6] = data.field.subjectsScore7
            subjectList[7] = data.field.subjectsScore8

            data.field = {
                studentId: data.field.studentId
                ,studentName: data.field.studentName
                ,className: data.field.className
                ,subjectsScore: subjectList
            }

            console.log(data.field)

            $.ajax({
                url: webUrl + studentsDataPrefix + "/studentScoreInfo",
                type: 'POST',
                contentType: "application/json",//设置请求参数类型为json字符串
                dataType: "json",
                data: JSON.stringify(data.field),
                success: function (response) {
                    console.log("数据回传")
                    console.log(response)
                    if (response.msg === "成功") {
                        parent.layer.msg("修改成功", {icon: 6});
                        // 关闭当前打开的页面。
                        parent.layer.close(2); //再执行关闭
                    } else {
                        parent.layer.msg(response.msg, {icon: 5});
                    }
                },error: function (){
                    parent.layer.msg("修改失败,服务器出现错误！", {icon: 5});
                }
            })
        });
    });
</script>
</body>
</html>